<template>
	<view class="page">
		<view class="list-box">
			<view class="item-box">
				<text class="item-box_label">姓名</text>
				<input class="item-box_value" v-model="consignee" type="text" placeholder="姓名" maxlength="5">
			</view>
			<view class="item-box">
				<text class="item-box_label">手机</text>
				<input class="item-box_value" v-model="mobile" type="number"  placeholder="手机号码" maxlength="11">
			</view>
			<view class="item-box">
				<text class="item-box_label">城市</text>
				<picker mode="multiSelector" 
				:value="addressValue"
				:range="currentAddressList"
				range-key="value"
				@columnchange="onColumnchange"
				 @change="onChangeCity">
					<view class="item-box_value" 
					:class="isChooseAddress ? '' : 'placeholder-text'"
					@tap="chooseCity">
						{{isChooseAddress ? province + '-' + city + '-' + district : '省份、城市、区县'}}
					</view>
				</picker>
			</view>
			<view class="item-box">
				<text class="item-box_label">地址</text>
				<input class="item-box_value" v-model="address" type="text"  placeholder="详细地址，如楼道、楼盘号等" maxlength="30">
			</view>
			<view class="item-box flex-sb">
				<text class="item-box_label">设置为默认地址</text>
				<switch style="transform: scale(.8);" :checked="checked" @change="onChange" />
			</view>
		</view>
		<view class="submit-box" @tap="onSubmit">保存</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {addAddressApi,getAddressApi} from '@/api/user.js'
	export default {
		computed: {
			...mapState(['user_id','token'])
		},
		data() {
			return {
				consignee: '', // 姓名
				mobile: '', // 手机号
				province: '', // 省
				city: '', // 市
				district: '', // 区
				address: '', // 详细地址
				checked: true, // 是否默认
				addressValue: [0,0,0],
				addressList: [],
				currentAddressList: [],
				isChooseAddress: false,
				address_id: null
			};
		},
		onLoad({address_id = null}) {
			if(address_id) {
				this.address_id = address_id
				this.getAddress()
			}
			this.getCity()
		},
		methods: {
			// 获取地址详情
			async getAddress() {
				const res = await getAddressApi({
					address_id: this.address_id,
					user_id: this.user_id,
					token: this.token
				})
				const {address,is_default,mobile,consignee,
				province_name,city_name,district_name,
				province,city,district} = res.data.data
				this.address = address
				this.checked = is_default === 'true' ? true : false
				this.mobile = mobile
				this.consignee = consignee
				this.province = province_name // 省
				this.city = city_name // 市
				this.district = district_name // 区
				this.isChooseAddress = true
			},
			async onSubmit() {
				// 验证
				const regName =/^[\u4e00-\u9fa5]{2,6}$/;
				if(!regName.test(this.consignee)){
				  uni.showToast({
				  	title: '姓名格式错误',
					icon: 'none'
				  })
				  return false;
				}
				const regPhone = /^[1][3,4,5,7,8][0-9]{9}$/
				if(!regPhone.test(this.mobile)){
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})
				  return false;
				}
				if(!this.isChooseAddress) {
					uni.showToast({
						title: '请选择城市地址',
						icon: 'none'
					})
					return false;
				}
				if(!this.address) {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none'
					})
					return false;
				}
				const res = await addAddressApi({
					user_id: this.user_id,
					token: this.token,
					consignee: this.consignee,
					mobile: this.mobile,
					address: this.address,
					province: this.province,
					city: this.city,
					district: this.district,
					checked: this.checked
				})
				uni.showToast({
					title: '保存成功!'
				})
				setTimeout(() => {
					uni.navigateBack()
				},300)
			},
			onChange() {
				this.checked = !this.checked
			},
			// 获取城市
			getCity() {
				uni.request({
					url: 'http://demo.520zhan.com/js/region.json',
					success: (res) => {
						this.addressList = res.data
						this.currentAddressList[0] = this.addressList
						this.currentAddressList[1] = this.addressList[0].children
						this.currentAddressList[2] = this.addressList[0].children[0].children
					}
				})
			},
			onColumnchange(e) {
				const {column,value} = e.detail
				this.addressValue[column] = value
				// 判断
				if(column === 2) return
				if(column === 0) {
					this.addressValue[1] = 0
					this.addressValue[2] = 0
					this.$set(this.currentAddressList,1,this.addressList[value].children)
				}
				if(column === 1) {
					this.addressValue[2] = 0
				}
				this.$set(this.currentAddressList,2,this.addressList[this.addressValue[0]].children[this.addressValue[1]].children)
			},
			onChangeCity(e) {
				this.addressValue = e.detail.value
				// 计算
				const currentProvince = this.addressList[this.addressValue[0]]
				const currentCity = currentProvince.children[this.addressValue[1]]
				const currentDistrict = currentCity.children[this.addressValue[2]]
				this.province = currentProvince.value
				this.city = currentCity.value
				this.district = currentDistrict.value
				this.isChooseAddress = true
			},
			chooseCity() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-box {
	.item-box {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		padding: 30rpx;
		box-sizing: border-box;
		&_label {
			font-size: 28rpx;
			color: #666666;
		}
		&_value {
			font-size: 28rpx;
			color: #333333;
			padding-left: 20rpx;
			width: 600rpx;
		}
		.placeholder-text {
			color: #888888;
		}
	}
	.flex-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.submit-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #E81526;
		color: #ffffff;
		font-size: 32rpx;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		width: 750rpx;
	}
</style>
